<template>
    <!-- 自定义表格 -->
    <custom-table
      ref="customTableRef"
      row-key="id"
      :columns="columns"
      :api="discussLogListCRUD.page"
      column-controller-key="DiscussLogList"
    >
    <template #topContent>
      <div style="margin-bottom: var(--td-comp-margin-xxl)">
        <t-button v-permission="['system:discuss-log:create']" @click="handleOpenDialog('create', createParams)">
          新建洽商变更
        </t-button>
      </div>
    </template>
    <template #discussLogType="{ row }">
        {{ dictionaryStore.analysis('discuss_log_type', row.discussLogType) }}
      </template>
      <template #discussTimeType="{ row }">
        {{ dictionaryStore.analysis('discuss_time_type', row.discussTimeType) }}
      </template>
      <template #designerSignTime="{ row }">
        {{ row.designerSignTime?dayjs(row.designerSignTime).format('YYYY-MM-DD hh:mm:ss'):'' }}
      </template>
      <template #customSignTime="{ row }">
        {{ row.customSignTime?dayjs(row.customSignTime).format('YYYY-MM-DD hh:mm:ss'):'' }}
      </template>
      <template #examineTime="{ row }">
        {{ row.examineTime?dayjs(row.examineTime).format('YYYY-MM-DD'):'' }}
      </template>
      <template #createTime="{ row }">
        {{ row.createTime?dayjs(row.createTime).format('YYYY-MM-DD hh:mm:ss'):'' }}
      </template>  
      <template #operation="{ row }">
        <t-space break-line>
          <t-link
            v-permission="['system:discuss-log:query']"
            theme="primary"
            @click="handleOpenDialog('read', { id: row.id })"
          >
            详情
          </t-link>
          <t-popconfirm content="确认要删除该项吗？" @confirm="handleDelete({ id: row.id })">
            <t-link v-permission="['system:discuss-log:delete']" theme="danger"> 删除 </t-link>
          </t-popconfirm>
        </t-space>
      </template>
  </custom-table>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { ref, useTemplateRef } from 'vue';
import { MessagePlugin, TableCol } from 'tdesign-vue-next';
import { discussLogListCRUD } from '@/api/project/details';
import CustomTable from '@/components/custom/table/index.vue';
import { useDictionaryStore } from '@/store';

const emit = defineEmits(['open-dialog']);
// 字典仓库
const dictionaryStore = useDictionaryStore();

const props = defineProps({
  // columns: {
  //   type: Array as () => TableCol[],
  //   required: true,
  // },
  initialParams: {
    type: Object,
    required: true,
  },
  createParams: {
    type: Object,
    required: true,
  },
});

// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');
// 处理刷新表格
const handleRefreshTable = () => {
  customTableRef.value.refreshTable();
};
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  // 处理打开对话框的逻辑
  emit('open-dialog', mode, params);
};
// columns
const columns: TableCol[] = [
  // { colKey: 'logName', title: '记录名称' },
  { colKey: 'discussLogType', title: '洽商类型' },
  { colKey: 'discussTimeType', title: '洽商时段' },
  { colKey: 'extensionDay', title: '延期天数' },
  { colKey: 'designerSign', title: '设计师签名' },
  { colKey: 'designerSignTime', title: '设计师签名时间' },
  { colKey: 'customSign', title: '客户签名' },
  { colKey: 'customSignTime', title: '客户签名时间' },
  { colKey: 'examineTime', title: '审批通过时间' },
  { colKey: 'result', title: '审核结果' },
  { colKey: 'createTime', title: '创建时间' },
  { colKey: 'operation', title: '操作', width: 160, fixed: 'right' },
].map(column => ({ ...column, align: 'center' }));
// 处理删除
const handleDelete = (params: Record<string, any>) => {
  discussLogListCRUD
    .delete(params)
    .then(() => {
      MessagePlugin.success('删除成功');
      handleRefreshTable();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};
// 处理初始化表格
const handleInitTable = () => {
  const params = props.initialParams;
  customTableRef.value.initTable(params);
};
defineExpose({
  initTable: handleInitTable,
  refreshTable: handleRefreshTable,
});
</script>